<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        img{
            display: block;
        }
        .picShow{
            width: 100%;
            height: 260px;
            background: #ccc;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            top: -260px;
            transition: 1s;
        }
        .picShow img{
            width: 300px;
        }
        button{
            padding: 5px 10px;
            position: absolute;
        }
        .active{
            top: 0;
        }
    </style>
</head>
<body>
    <div class="picShow">
        <img class="picItem" src="img/1.jpg" alt="">
        <img class="picItem" src="img/2.jpg" alt="">
        <img class="picItem" src="img/3.jpg" alt="">
    </div>
    <button>换肤</button>

    <script>
        var btn = document.querySelector('button');
        var picShow = document.querySelector('.picShow');

        // 出现换肤列表
        btn.onclick = function(){
            picShow.classList.toggle('active') ;
        }

        // 换肤
        picShow.addEventListener('click',function(e){
            if(e.target.className === 'picItem'){
                // 设置body背景
                // document.body.style.background ='url('+ e.target.src +') no-repeat center center / 100% 100% ';
                document.body.style.background ='url('+ e.target.src +') no-repeat center center / 100% 100%';
                picShow.classList.toggle('active') ;
            }
        })
    </script>
</body>
</html>